<template>
	<div>
		<van-sticky>
			<van-tabs v-model="active" @change="onChange">
				<van-tab title="正在热映" name='hot'></van-tab>
				<van-tab title="即将上映" name='soon'></van-tab>
			</van-tabs>
		</van-sticky>
		<!-- 引入路由 -->
		<router-view />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: "hot",
			}
		},
		methods: {
			/* 
			name:标签名，代表hot路由
			title：标签标题
		  */
			onChange(name, title) {
				// 切换路由
				this.$router.replace({
					name: name
				})
			}
		},
		// 挂载后钩子函数
		mounted() {
			/* 
	  		原因：浏览器刷新后tar的选择改变
	  		将tar的active改正
	  */
			// 提取出当前路由名字
			let name = this.$route.name
			// 名字对应修改active
			switch (name) {
				case "hot":
					this.active = "hot";
					break;
				case "soon":
					this.active = "soon";
					break
			}
		}
	}
</script>
